<template>
  <div class="action-history">
    <el-row>
      <el-col :span="24">
        <dynForm :info-form="searchForm" :search-tags="searchTags" :select-list="selectList">
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="doSearch"
          >
            {{ $t("search") }}</el-button
            >
        </dynForm>
      </el-col>
    </el-row>
    <!-- 表单部分 -->
    <el-card>
      <el-row>
        <dynTable
          ref="dynTable"
          :loading="tableLoading"
          :table-data="tableData"
          :table-columns="tableColumns"
        />
      </el-row>
      <pagination
        :total="total"
        :page.sync="listQuery.page"
        :size.sync="listQuery.size"
        @pagination="getList"
      />
    </el-card>
    <!-- <actionHistoryForm ref="actionHistoryForm"/> -->
  </div>
</template>

<script>
import mySetting from '@/mixins/mySetting'
import actionHistoryApi from '@/api/alarm/actionHistory'
import { eqpnamelist } from '@/api/equipment/eqpbase'
import { getAllActions } from '@/api/alarm/action'
// import actionHistoryForm from './components/actionHistoryForm'
export default {
  name: 'AlarmActionHistory',
  // components: { actionHistoryForm },
  mixins: [mySetting],
  props: {},
  data() {
    return {
      searchForm: {},
      searchTags: [
        { label: this.$t('eqpId'), prop: 'eqpName', tag: 'DynSelect' },
        { label: this.$t('alarmId'), prop: 'alarmID', tag: 'DynInput' },
        { label: this.$t('ExecAction'), prop: 'alarmAction', tag: 'DynSelect' },
        { label: this.$t('ExecResult'), prop: 'result', tag: 'DynSelect' },
        { label: this.$t('SystemTime'), prop: '', tag: 'Dyndaterange', event: (value) => {
          this.searchForm.startTime = Array.isArray(value) ? value[0] : null
          this.searchForm.endTime = Array.isArray(value) ? value[1] : null
        } }
      ],
      selectList: {},
      tableColumns: [
        { prop: '', label: this.$t('index'), type: 'index', width: '50px', templete: (_scope) => {
          return (
            <span>{ (this.listQuery.page - 1) * this.listQuery.size + _scope.$index + 1 }</span>
          )
        } },
        { prop: 'eqpID', label: this.$t('eqpId') },
        { prop: 'alarmID', label: this.$t('alarmId') },
        { prop: 'systemTime', label: this.$t('SystemTime') },
        { prop: 'alarmAction', label: this.$t('ExecAction') },
        { prop: 'result', label: this.$t('ExecResult'), templete: (_scope) => {
          return (
            <el-tag type={this.tagType(_scope.row.result)} effect='dark'>
              { this.tagStatus(_scope.row.result) }</el-tag>
          )
        } },
        { prop: 'relatedPersons', label: this.$t('RelatedInfo') },
        { prop: 'remark', label: this.$t('remark') }
      ],
      tableLoading: true
    }
  },
  computed: {},
  watch: {},
  created() {
    Promise.race([
      this.initList(),
      this.getEqpList(),
      this.getActionsList(),
      this.getResult()
    ])
  },
  mounted() {},
  methods: {
    doSearch() {
      this.listQuery.page = 1
      this.initList()
    },
    async initList() {
      this.tableLoading = true
      const res = await actionHistoryApi.getList(this.$clearNull({ ...this.searchForm, ...this.listQuery }))
      this.tableData = res.data
      this.total = res.total
      this.tableLoading = false
    },
    async getEqpList() {
      const res = await eqpnamelist()
      this.$set(this.selectList, 'eqpName', res.data)
    },
    async getActionsList() {
      const res = await getAllActions()
      this.$set(this.selectList, 'alarmAction', res.data)
    },
    getResult() {
      const obj = [{ id: 2, name: this.$t('Failed') }, { id: 1, name: this.$t('Successful') }, { id: 0, name: this.$t('Processing') }]
      this.$set(this.selectList, 'result', obj)
    },
    tagType(type) {
      const mapTagType = {
        0: '',
        1: 'success',
        2: 'danger'
      }
      return mapTagType[type]
    },
    tagStatus(type) {
      const mapTagStatus = {
        0: this.$t('Processing'),
        1: this.$t('Successful'),
        2: this.$t('Failed')
      }
      return mapTagStatus[type]
    }
  }
}
</script>

<style scoped lang="scss">
@import "~@/assets/styles/defaultStyle.scss";
::v-deep .el-form {
  padding-top: 10px;
  //     .el-form-item{
  //   margin-bottom: 15px;
  // }
}
</style>
